<template>
    <div class="page">
        <leftBar />
        <div class="page_one" v-if="detail.url">
            <div class="position">
                <div class="sub"><em>Innovative expression</em>  创新表达</div>
                <div class="title">月度入围作品</div>
            </div>
            <a href="javascript:;" class="backBtn" @click="goPage">
                <i class="el-icon-arrow-left"></i>
            </a>

            <div class="video" v-if="detail.type == 'mp4'">
                <video-player class="vjs-custom-skin" :options="videoParam(detail)"></video-player>
            </div>
            <div class="img" v-else>
                <el-image 
                    style="width:100%; height:100%"
                    :src="detail.url[0]+'&spec=1000'" 
                    :preview-src-list="detail.url">
                </el-image>
            </div>
            <div class="txt">
                <div class="path">
                    <span v-if="detail.type == 'mp4'">视频</span>
                    <span v-if="detail.type == 'gif'">GIF</span>
                    <span v-if="detail.type == 'jpg' || detail.type == 'png'">海报</span>
                </div>
                <h1>{{detail.title}}</h1>
                <div class="author">{{detail.author}}</div>
                <div class="desc"><label>设计说明：</label>{{detail.desc}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import leftBar from '@/components/leftBar.vue'
    import {mapState} from 'vuex';
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    import { innovate_detail } from '@/assets/js/getData';
    export default {
        name: 'innovateDetail',
        data(){
            return {
                detail:{},
                id:'',
            }
        },
        components: {
            leftBar,
            videoPlayer
        },
        computed:{
			...mapState([
				'innovateDetail'
			])
        },
        watch:{
            $route(){
                this.id=this.$route.params.id;
                this.init();
            }
        },
        mounted() {
            if(this.innovateDetail){
                this.detail = this.innovateDetail;
            }else{
                this.id=this.$route.params.id;
                this.init();
            }
        },
        methods:{
            goPage(){
                this.$router.go(-1);
            },
            async init(){
                const res = await innovate_detail({data:encodeURI(JSON.stringify({id:this.id}))});
                if(res.code == '0'){
                    this.detail = res.data;
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            videoParam(detail){
                let videoParam = {
                    playbackRates:[ 0.5, 1.0, 1.5, 2.0 ],
                    height: '268',
                    fluid : true,
                    controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                    },
                    sources : [{
                        type : "video/mp4",
                        src : detail.url[0]
                    }],
                    poster: detail.poster
                }
                return videoParam;
            }
        }
    }
</script>

<style scoped>
    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .backBtn{font-size:20px;width:30px;height:30px;line-height:40px;text-align:center;display:inline-block;background:rgba(0, 0, 0, 0.1);line-height:30px;color:#fff;margin:5px;border-radius:50%;transition:all 0.3s;}
    .backBtn:hover{background:rgba(0, 0, 0, 0.2);}
    .video{width:476px;margin:78px auto 0;padding-bottom:60px;}
    .img{width:280px;height:384px;margin:20px auto 0;}

    .txt{width:476px;margin:0 auto;padding-top:32px;}
    .txt .path span{padding:0 8px;height: 22px;line-height:22px;background: #f1f4f7;font-size:12px;text-align:center;position: relative;display:inline-block;color: #7987a3;}
    .txt .path span:after{content:"";border-top:11px solid transparent;border-bottom:11px solid transparent;
    border-left:11px solid #f1f4f7;position: absolute;right:-11px;top:0;}
    .txt h1{font-size:32px;font-weight:400;margin-top:10px;}
    .txt .author{font-size:20px;margin-top:40px;}
    .txt .desc{color: #7987A3;line-height:22px;margin-top:16px;}
    .txt .desc label{color: #333;}
</style>